<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta charset="utf-8">
            <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
                <title>
                    工作年限分析
                </title>
            </link>
        </meta>
    </head>
    <body>
        <header class="navbar navbar-inverse navbar-static-top bs-docs-nav" id="top">
            <div class="container">
                <div class="navbar-header">
                    <button aria-controls="bs-navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-navbar" data-toggle="collapse" type="button">
                        <span class="sr-only">
                            Toggle navigation
                        </span>
                        <span class="icon-bar">
                        </span>
                        <span class="icon-bar">
                        </span>
                        <span class="icon-bar">
                        </span>
                    </button>
                    <a class="navbar-brand" href="../">
                        Logo
                    </a>
                </div>
                <nav class="collapse navbar-collapse" id="bs-navbar">
                    <ul class="nav navbar-nav">
                        <li >
                            <a href="weekline.html">
                                一周职位统计
                            </a>
                        </li>
                        <li>
                            <a href="workyear.html">
                                工作年限统计
                            </a>
                        </li>
                        <li>
                            <a href="company.html">
                                热门公司统计
                            </a>
                        </li>
                        <li class="active">
                            <a href="education.html">
                                学历分析
                            </a>
                        </li>
                        <li>
                            <a href="word.html">
                                词云图
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- 主题内容 -->
        <div class="container">
            <div id="main" style="height:400px;">
            </div>

            <div id="salary" style="height: 400px"></div>
        </div>
        <!-- 主题结束 -->
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
        </script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">
        </script>
        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.common.min.js">
        </script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var salaryChart = echarts.init(document.getElementById('salary'));
        // 指定图表的配置项和数据
        var salaryOption  = {
            title : {
                text: '各学历平均阶段平均薪资情况',
                subtext: '数据来源BOSS直聘',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: function (params) {
                    var res='<div><p>'+params['name'] +"平均薪资:"+ params['value'].toFixed(2)+'元</p>'

                    return res;
                },
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [],
                type: 'bar',

            }]
        };

        salaryChart.setOption(salaryOption)
        var option = {
            legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: []
                },
                series : [
                    {
                        name: '学历',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }],
            title : {
                text: '基于招聘网站学历分析',
                subtext: '数据来源BOSS直聘',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}个 ({d}%)"
            }
        };

        myChart.setOption(option);
        myChart.showLoading();
        $.get('http://yehe.37he.cn/api/education.php')
        .done(function (data) {
            myChart.hideLoading();
            result = deal_workyear(data)
            console.log(result)
            option.legend.data = result.legend
            option.series[0].data = result.series
            salaryOption.xAxis.data = result.legend
            salaryOption.series[0].data = result.salarySeries
            myChart.setOption(option);
            salaryChart.setOption(salaryOption)
        });

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        function deal_workyear(data) {
            var legend = []
            var series = []
            var salarySeries =[]
            data.forEach(function(item,index){
                legend.push(item['educational'])
                var temp = {}
                temp.name = item['educational']
                temp.value = item['count']
                series.push(temp)
                salarySeries.push(item['salary'])
            })

            return {legend,series,salarySeries}
        }
        </script>
    </body>
</html>